<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS类风格开发-ZPCode UI Kits</title>
  <link rel="stylesheet" href="http://zx4.com:8001/kits/css/zpcode.min.css">
  <link rel="stylesheet" href="../statics/css/index.css">
  <link rel="stylesheet" href="../statics/highlight/styles/github-dark.min.css">
  <!--zpcode.min.js-->
  <script src="http://zx4.com:8001/kits/webcomponents/ZPElement.js" type="module" defer></script>
  <script src="http://zx4.com:8001/kits/webcomponents/search/style01.js" type="module" defer></script>
  <!--zpcode.min.js-->
  <script src="../statics/webcomponents/layout/leftnav.js" type="module" defer></script>
  <script src="../statics/webcomponents/layout/footer.js" type="module" defer></script>
  <script src="../statics/webcomponents/table/compatibility.js" type="module" defer></script>
  <script src="../statics/js/usage/classstyle.js" type="module" defer></script>
  <script src="../statics/js/extra.js" type="module" defer></script>
</head>
<body class="dark">
  <div class="mih12p f">
    <left-nav current="classstyle"></left-nav>
    <div class="fa bl1" style="width:0">
      <div class="c ma mt48 pb48">
        <h1>CSS类风格开发</h1>
        <hr>
        <h2 id="what"># 什么是CSS类风格开发</h2>
        <p><b>CSS类风格开发</b>是指通过约定好类名规则，应用已编译的样式来进行页面布局和修饰，进而提高开发速度和效率，只有极少量的CSS开发。</p>
        <p>👇通常情况下的HTML和CSS开发：</p>
        <pre class="pr"><code class="hljs language-xml zp-classstyle-normal"></code></pre>
        <p>👇同样的效果，CSS类风格开发仅需少量代码：</p>
        <pre class="pr"><code class="hljs language-xml zp-classstyle"></code></pre>
        <p><b class="txt-w">当页面布局或样式修饰越多，CSS类风格开发的速度和效率越高</b>。唯一缺陷是HTML将变得相对臃肿，而且需要对CSS类开发的规则付出一定的学习成本，但是一旦熟悉了该规则并一直应用它，其学习成本可以忽略不计。</p>

        <hr class="mt36 mb36">
        <h2 id="usage"># 使用</h2>
        <p>ZPCode CSS 预编译规则已适用大部分应用场景，您可以根据应用场景引入合适的CSS</p>
        <p>1）全能版，CSS规则全，体积偏大，适用于大型应用和较复杂的自适应布局👇：</p>
        <pre class="pr"><code class="hljs language-xml zp-classstyle-usageall"></code></pre>
        <p>2）<b class="txt-w">【推荐】</b>mini版，CSS规则少，体积偏小，适用于中小应用和较简单的自适应布局👇：</p>
        <pre class="pr"><code class="hljs language-xml zp-classstyle-usage"></code></pre>
        <p>3）超mini版，CSS规则极少，体积极小，适用于小型应用和落地页，自适应布局仅支持PC端和手机端👇：</p>
        <pre class="pr"><code class="hljs language-xml zp-classstyle-usagesm"></code></pre>

        <hr class="mt36 mb36">
        <h2 id="rules"># ZPCode CSS规则</h2>
        <p>ZPCode CSS 预编译规则已适用大部分应用场景。限于个人时间安排，CSS 类名规则使用文档待完善。</p>

      </div>
      <zp-footer></zp-footer>
    </div>
    <div class="w200">
      <ul class="bl1 p0 mt48 pl24 ps t48 lh30">
        <li><a href="#what" class="txt-con txt-p-h">什么是CSS类风格开发</a></li>
        <li><a href="#usage" class="txt-con txt-p-h">使用</a></li>
        <li><a href="#rules" class="txt-con txt-p-h">ZPCode CSS规则</a></li>
        <li class="mt12"><a href="#" class="txt-cg txt-b-h fs12">▲ 顶部</a></li>
      </ul>
    </div>
  </div>
  <script src="../statics/highlight/highlight.min.js"></script>
  <script src="../statics/highlight/languages/xml.min.js"></script>
  <script src="../statics/highlight/languages/css.min.js"></script>
</body>
</html>